<template>
	<view class="data-import">
		<view class="excel-import-box">
			<view class="excel-import-title">导入excel</view>
			<view class="excel-template-export">
				<view class="excel-export-title">{{currentWxType}}导入模板</view>
				<view class="excel-export-btn" @click.stop="onDownloadTemplate">点击下载</view>
			</view>
			<view class="excel-import-content" v-if="isImportShow">
				<image class="excel-icon" src="../../static/xubao/excel-gray.png"></image>
				<view class="excel-desc-box" @click.stop="uploadFiles">
					<van-icon class="add-icon" name="plus" />
					<text class="add-text">选择excel文件</text>
				</view>
			</view>

			<view class="excel-import-content" v-else>
				<van-icon class="close-icon" @click.stop="deleteUploadFile" name="cross" />
				<image class="excel-icon" src="../../static/xubao/excel-green.png"></image>
				<view class="excel-desc-box">
					<text class="excel-name">{{uploadFilesData.name ? uploadFilesData.name : "-"}}</text>
				</view>
				<view class="submit-upload-btn" @click.stop="submitUploadFiles">开始上传</view>
			</view>
		</view>
		<!-- 历史上传记录 -->
		<view class="history-import-record-box">
			<view class="history-import-title">历史上传记录</view>
			<view class="history-import-list">
				<view class="history-import-item" v-for="(item, index) in historyUploadRecordsList" :key="index">
					<view class="import-left-box">
						<image class="left-icon" src="../../static/xubao/excel.png"></image>
						<view class="import-info-box">
							<view class="import-info-name">{{item.typeRemark}}</view>
							<view class="import-info-date">{{item.insertDate}}</view>
						</view>
					</view>
					<view class="import-right-box">{{item.inputer}}</view>
				</view>
			</view>
		</view>
		<uni-load-more class="loadingMore" :status="loadStatus" v-show="isLoadMore" :content-text="contentText"
			@clickLoadMore="handleLoadMore" />

		<view class="height"></view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				isImportShow: true,
				currentWxType: "",
				uploadFilesData: {},
				paged: {
					"pageSize": 10,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				historyUploadRecordsList: [],
				loadStatus: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				isLoadMore: false,
			}
		},
		onShow() {

		},
		onLoad() {
			const wxType = uni.getStorageSync("wxType");
			if (wxType == 'xubao') {
				this.currentWxType = "续保";
				this.getXubaoHistoryUploadRecords();
				
			} else if (wxType == 'dingbao') {
				this.currentWxType = "定保";
				this.getDingbaoHistoryUploadRecords();
			}
		},
		methods: {
			// 上传文件 (将打开微信会话列表，从微信会话中选取文件)
			uploadFiles() {
				console.log('点击了上传');
				var that = this;
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success(res) {
						const tempFile = res.tempFiles[0];
						if (tempFile) {
							let suffix = tempFile.path.substring(tempFile.path.length - 4, tempFile.path.length);
							if (suffix == 'xlsx' || suffix == 'xls') {
								that.isImportShow = false;
								that.uploadFilesData = tempFile;
							} else {
								getApp().showToast("请上传excel格式文件");
								return false;
							}
						}
					}
				})
			},
			// 删除已选文件
			deleteUploadFile() {
				this.isImportShow = true;
				this.uploadFilesData = {};
			},
			// 开始上传
			submitUploadFiles() {
				const loginInfo = uni.getStorageSync("loginInfo");
				const wxType = uni.getStorageSync("wxType");
				let uploadFilesData = this.uploadFilesData;
				getApp().showLoading();
				var that = this;
				let p1 = new Promise((resolve) => {
					uni.uploadFile({
						url: getApp().globalData.websiteUrl +
							"/api/v1/FileUpload",
						filePath: uploadFilesData.path,
						name: 'file',
						header: {
							'Authorization': ('Bearer ' + loginInfo.token) ||
								''
						},
						formData: {
							'fileType': 'KeepTemp'
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							console.log("上传结果", res);
							let filePath = res.data[0].filePath;
							let newFilePath = filePath.replace(/\\/g, "/");
							// let imgName = `${getApp().globalData.websiteUrl}${newFilePath}/${res.data[0].fileName}`;
							let imgName = `${filePath}/${res.data[0].fileName}`;
							resolve(imgName);
						}
					});
				})
				p1.then((excel) => {
					if (wxType == 'xubao') {
						let rqsData = {
							"type": "keepXB",
							"file": excel,
							"isCover": true
						};
						console.log('续保上传的接口请求字段', rqsData);
						apiRqs._importXubaoData(rqsData).then((res) => {
							uni.hideLoading();
							console.log("导入结果", res);
							if (res.code == 200) {
								getApp().showToast("导入成功");
								that.isImportShow = true;
								that.uploadFilesData = {};
								apiRqs._getXubaoHistoryUploadRecords({
									"pageSize": 5,
									"pageIndex": 1,
									"orderBy": "asc"
								}).then((res) => {
									if (res.code == 200) {
										let newData = JSON.parse(JSON.stringify(res.data.data));
										if (newData.length > 0) {
											let prevNewData = newData[0];
											that.historyUploadRecordsList.unshift(prevNewData);
										}
									}
								})
							} else {
								getApp().showToast(res.msg);
							}

						})
					} else if (wxType == 'dingbao') {
						let rqsData = {
							"type": "keepDB",
							"file": excel,
							"isCover": true
						};
						console.log('定保上传的接口请求字段', rqsData);
						apiRqs._importDingbaoData(rqsData).then((res) => {
							uni.hideLoading();
							console.log("导入结果", res);
							if (res.code == 200) {
								getApp().showToast("导入成功");
								that.isImportShow = true;
								that.uploadFilesData = {};
								apiRqs._getDingbaoHistoryUploadRecords({
									"pageSize": 5,
									"pageIndex": 1,
									"orderBy": "asc"
								}).then((res) => {
									if (res.code == 200) {
										let newData = JSON.parse(JSON.stringify(res.data.data));
										if (newData.length > 0) {
											let prevNewData = newData[0];
											that.historyUploadRecordsList.unshift(prevNewData);
										}
									}
								})
							} else {
								getApp().showToast(res.msg);
							}

						})
					}

				})
			},

			// 获取续保历史上传记录
			getXubaoHistoryUploadRecords(type) {
				getApp().showLoading();
				apiRqs._getXubaoHistoryUploadRecords(this.paged).then((res) => {
					uni.hideLoading();
					console.log('续保历史上传记录', res);
					if (res.code == 200) {
						const newData = JSON.parse(JSON.stringify(res.data.data));
						if (newData.length > 0) {
							this.isLoadMore = true;
							if (newData.length < this.paged.pageSize) {
								this.loadStatus = 'nomore';
							} else {
								this.loadStatus = 'more';
							}
						} else {
							this.isLoadMore = false;
							this.loadStatus = 'nomore';
						}
						if (type == 'loadMore') {
							this.historyUploadRecordsList = this.historyUploadRecordsList.concat(newData);
						} else {
							this.historyUploadRecordsList = newData;
						}
					} else {
						this.isLoadMore = false;
						getApp().showToast(res.msg);
					}
				})
			},
			// 获取定保历史上传记录
			getDingbaoHistoryUploadRecords(type) {
				getApp().showLoading();
				apiRqs._getDingbaoHistoryUploadRecords(this.paged).then((res) => {
					uni.hideLoading();
					console.log('定保历史上传记录', res);
					if (res.code == 200) {
						const newData = JSON.parse(JSON.stringify(res.data.data));
						if (newData.length > 0) {
							this.isLoadMore = true;
							if (newData.length < this.paged.pageSize) {
								this.loadStatus = 'nomore';
							} else {
								this.loadStatus = 'more';
							}
						} else {
							this.isLoadMore = false;
							this.loadStatus = 'nomore';
						}
						if (type == 'loadMore') {
							this.historyUploadRecordsList = this.historyUploadRecordsList.concat(newData);
						} else {
							this.historyUploadRecordsList = newData;
						}
					} else {
						this.isLoadMore = false;
						getApp().showToast(res.msg);
					}
				})
			},
			// 加载更多
			handleLoadMore() {
				const wxType = uni.getStorageSync("wxType");
				if (this.loadStatus == 'more') {
					this.paged.pageIndex += 1;
					if (wxType == 'xubao') {
						this.getXubaoHistoryUploadRecords('loadMore');
					} else if (wxType == 'dingbao') {
						this.getDingbaoHistoryUploadRecords('loadMore');
					}

				}
			},
			onDownloadTemplate() {
				const wxType = uni.getStorageSync("wxType");
				if (wxType == 'xubao') {
					uni.navigateTo({
						url: "/packageD/data-download/download?type=xubao"
					})
				} else if (wxType == 'dingbao') {
					uni.navigateTo({
						url: "/packageD/data-download/download?type=dingbao"
					})
				}
				
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.data-import {
		.height {
			height: 40px;
		}

		.loadingMore {
			.uni-load-more {
				margin-top: 10px;
			}
		}

		.excel-import-box {
			.excel-import-title {
				font-size: 16px;
				color: rgba(0, 0, 0, 0.7);
				margin: 20px;
				font-weight: 500;
			}

			.excel-template-export {
				background-color: #fff;
				border-radius: 10px;
				margin: 0px 20px 20px 20px;
				box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
				padding: 15px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.excel-export-title {
					font-size: 14px;
					color: #333;
				}

				.excel-export-btn {
					font-size: 14px;
					color: #008aff;
				}
			}

			.excel-import-content {
				background-color: #fff;
				border-radius: 10px;
				margin: 0px 20px 20px 20px;
				box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
				height: 150px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				padding: 20px;
				box-sizing: border-box;

				.close-icon {
					position: absolute;
					font-size: 18px;
					right: 20px;
					top: 15px;
					color: #949494;
				}

				.submit-upload-btn {
					font-size: 13px;
					color: #008aff;
					width: 100%;
					text-align: center;
					margin-top: 15px;
					font-weight: 500;
				}

				.excel-icon {
					width: 50px;
					height: 50px;
				}

				.excel-desc-box {
					display: flex;
					align-items: center;
					margin-top: 20px;

					.add-icon {
						font-size: 14px;
						color: #45B058;
					}

					.add-text {
						font-size: 14px;
						color: #45B058;
						margin-left: 5px;
					}

					.excel-name {
						font-size: 14px;
						color: #5B5B5B;
						font-weight: 500;
					}
				}
			}
		}

		.history-import-record-box {
			margin: 20px;

			.history-import-title {
				font-size: 12px;
				color: rgba(0, 0, 0, 0.4);
				font-weight: 500;
			}

			.history-import-list {
				.history-import-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 15px;

					.import-left-box {
						display: flex;
						align-items: center;

						.left-icon {
							width: 28px;
							height: 28px;
						}

						.import-info-box {
							margin-left: 10px;

							.import-info-name {
								font-size: 14px;
								color: #454545;
								font-weight: 500;
							}

							.import-info-date {
								font-size: 12px;
								color: rgba(0, 0, 0, 0.4);
								margin-top: 3px;
							}
						}
					}

					.import-right-box {
						width: 60px;
						flex: 0 0 60px;
						text-align: center;
						font-size: 12px;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}
</style>
